import React, { useState, useEffect } from 'react';
import { Card, Button, message } from 'antd';
import { ProTable, ProColumns } from '@ant-design/pro-table';

import { getVehicleList } from '../../request/vehicle';
import { VehicleData } from '../../types/vehicle';



const VehicleList: React.FC = () => {
  const [dataSource, setDataSource] = useState<VehicleData[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  // Fetch data on component mount
  useEffect(() => {
    fetchVehicleData();
  }, []);

  const fetchVehicleData = async () => {
    setLoading(true);
    try {
      const data = await getVehicleList();
      setDataSource(data);
    } catch (error) {
      console.error('Failed to fetch vehicle data:', error);
      message.error('获取数据失败');
    } finally {
      setLoading(false);
    }
  };

  const columns: ProColumns<VehicleData>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '设备号',
      dataIndex: 'deviceId',
      key: 'deviceId',
    },
    {
      title: '车辆编号',
      dataIndex: 'vehicleNumber',
      key: 'vehicleNumber',
    },
    {
      title: '司机',
      dataIndex: 'deviceId',
      key: 'deviceId',
    },
    {
      title: 'SIM',
      dataIndex: 'deviceId',
      key: 'deviceId',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      valueType: 'dateTime',
    },
    {
      title: '容量',
      dataIndex: 'capacity',
      key: 'capacity',
    },
    {
      title: 'GPS',
      render: (_) => (
       <Button 
          type="link" 
          href={`https://map.baidu.com/`}
          target="_blank"
        >
          查看
        </Button>
      ),
    },
  ];

  return (
    <div>
      <div style={{ padding: '24px 0' }}>
        <Card 
          bordered={false} 
          style={{ 
            borderRadius: '8px',
            boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)'
          }}
          bodyStyle={{ padding: '24px' }}
        >
          <ProTable
            dataSource={dataSource}
            columns={columns}
            rowKey="key"
            pagination={{
              pageSize: 10,
            }}
            search={false}
            options={{
              setting: false,
              fullScreen: false,
              reload: false,
              density: false,
            }}
            loading={loading}
            bordered
          />
        </Card>
      </div>
    </div>
  );
};

export default VehicleList;